<template>
    <div class="my-header">
        <el-tabs v-model="data.activeName" class="demo-tabs">
            <el-tab-pane label="发明专利" name="first">
                <el-form :rules="rules" ref="ruleFormRef" :model="ruleForm" label-width="120px" class="demo-ruleForm"
                    status-icon>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="类型说明" prop="description">
                                <el-input placeholder="类型说明" v-model="ruleForm.description" maxlength="50"  show-word-limit clearable    />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="专利名称" prop="name">
                                <el-input placeholder="专利名称" v-model="ruleForm.name"  maxlength="500"  show-word-limit clearable    />
                            </el-form-item>
                        </el-col>
                        <el-col :span="24">
                            <el-form-item label="专利号" prop="patentNumber">
                                <el-input placeholder="" v-model="ruleForm.patentNumber"  maxlength="200"  show-word-limit clearable  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="专利权人" prop="patentUserName">
                                <!-- <SelectOption :selectValue="ruleForm.patentUserName" :options="options.userAllList" style="width: 150px"
                                    @change-value="changeValue1">
                                </SelectOption> -->
                                <user-list-modal
                                v-model="ruleForm.patentUserName"
                                @update:modelValue="changeValue1"
                                :default-users="[]"
                                :multiple="false"
                                :devType="'platform'"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="发明人" prop="inventorUserName">
                                <!-- <el-input placeholder="" v-model="ruleForm.inventorUserName" style="width: 150px" /> -->
                                <!-- <SelectOption :selectValue="ruleForm.inventorUserName" :options="options.userAllList" style="width: 150px"
                                    @change-value="changeValue0">
                                </SelectOption> -->
                                <user-list-modal
                                v-model="ruleForm.inventorUserName"
                                @update:modelValue="changeValue0"
                                :default-users="[]"
                                :multiple="false"
                                :devType="'platform'"
                                />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
          
                        <el-col :span="8">
                            <el-form-item label="申请日期" prop="birthdarDate">
                                <el-date-picker v-model="ruleForm.birthdarDate" type="date" placeholder="申请日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="奖励标准" prop="incentiveStandard">
                                    <SelectOption :selectValue="ruleForm.incentiveStandard" :options="options.jlbzList" style="width: 150px"
                                    @change-value="changeValue3"> </SelectOption>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="授权日期" prop="getEvent">
                                <el-date-picker v-model="ruleForm.getEvent" type="date" placeholder="授权日期"
                                    format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                                    style="width: 150px; margin-right: 15px"></el-date-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-form-item label="证书存放地" prop="storeded">
                                <el-input placeholder="" v-model="ruleForm.storeded"  maxlength="200"  show-word-limit clearable  />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="所有权排名" prop="ownership">
                                <!-- <el-input type="number" :min="1" v-model="ruleForm.ownership" style="width: 150px" /> -->
                                <SelectOption :selectValue="ruleForm.ownership" :options="options.jtpmList" style="width: 150px"
                                    @change-value="changeValue7"> </SelectOption>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
    <!--                            <el-form-item label="所有权" prop="getEvent">-->
                           <el-form-item label="所有权" >
                                  <popup-tree-input :data="orgAllList" :props="deptForm.popupTreeProps" :prop="deptForm.parentName == null
                              ? $t('message.org.top_menu')
                              : ruleForm.code
                            " :node-key="'' + deptForm.parentId" :current-change-handle="changeValue8" />
    
                            </el-form-item>
                        </el-col>
                    </el-row>
                  <!-- <el-row>
                    </el-row> -->
                </el-form>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script lang="ts">
import { ref, reactive, computed, watch, onMounted } from 'vue'
import SelectOption from '@/views/science/components/selectOption/index.vue'
import Api from '@/views/science/api/profess'
import { useStore } from 'vuex'
import { tips } from '@/views/science/components/tips/tips'
import UserListModal from '@/views/project/components/UserListModal/index.vue';
import PopupTreeInput from "@/views/science/components/PopupTreeInput/index.vue";

export default {
    components: {
        SelectOption,
        UserListModal,
      PopupTreeInput,
    },
    emits: {
        usersChange: null,
        valueFlag2:null,
        paramsChange:null,
    },
    props: {
        fbData: {
            type: Object,
            required: true,
        },
        addFlag: {
            type: Number,
            required: true,
        },
        zlData: {
            type: Object as any,
        },

        orgAllList: {
          type: Array,
          required: true,
        },
    },
    setup(props, { emit }) {
      const deptForm = {
        parentId: 0,
        parentName: '',
        popupTreeProps: {
          label: 'name',
          children: 'children',
          value: 'id',
          checkStrictly: true,
        },
      }


        const store = useStore()
        const labelPosition = ref('right')
        const data = reactive({
            activeName: ref('first'),
            dialogVisible: false,
            lobarDisabled: false,
            props: {
                multiple: true,
                expandTrigger: 'hover',
                value: 'id',
                label: 'name',
                children: 'children',
                emitPath: false
            },
            mainValue: [],
            mainValue1: [],
            chooseMatterList: [],
        })

        // 弹窗中三个下拉选择
        let options = reactive({
            projectnameList: computed(() => store.state.technologyStrength.KJSL_DECLARATION_TYPE),
            unitnameList: computed(() => store.state.technologyStrength.KJSL_APPLYING_FOR_AWARDS1),

            orgAllList: computed(() => store.state.technologyStrength.orgAllList),
            userAllList: computed(() => store.state.technologyStrength.userAllList),
            roleList: computed(() => store.state.technologyStrength.roleList),
            projectSelect: computed(() => store.state.technologyStrength.projectSelect),
            // hjTypeList: computed(() => store.state.technologyStrength.KJSL_AWARD_CATEGORY),

            hjjbList: computed(() => store.state.technologyStrength.KHGL_KJSL_HJJB),
            hjTypeList: [],
            hjdjList: [],
            jlbzList: [
                {
                    id: '1',
                    itemText: '国际专利5万',
                    itemValue: '5'
                },
                {
                    id: '2',
                    itemText: '发明专利2万',
                    itemValue: '2'
                },
                {
                    id: '3',
                    itemText: '实用新型专利0.3万',
                    itemValue: '0.3'
                },
                {
                    id: '4',
                    itemText: '计算机软件著作权0.2万',
                    itemValue: '0.2'
                },
            ],
            jtpmList: [
                {
                id: '1',
                itemText: '第一名',
                itemValue: '1'
                },
                {
                id: '2',
                itemText: '第二名',
                itemValue: '2'
                },
                {
                id: '3',
                itemText: '第三名',
                itemValue: '3'
                }
            ]
        })

        // 提交表单-字段对照新增接口-然后同步
        // const ruleForm = reactive(props.fbData)
        const ruleForm = reactive(store.state.technologyStrength.fbxxINFO) as any
        console.log();
        
        watch(ruleForm, (newValue, oldValue) => {
            store.commit('technologyStrength/getfbxxINFO', { ...ruleForm })
            emit('paramsChange', newValue)
        });

        watch(() => props.fbData,(newVal, oldVal) => {
                if(!props.fbData || !props.fbData.id){
                    return
                }
                console.log('watch fbData',props.fbData);
                let obj = props.fbData
                // obj.name = obj.patentName
                // obj.patentUserId = obj.patentUserId
                // obj.patentUserName = obj.patentUserName
                // obj.patentNumber = obj.patentId
                // obj.birthdarDate = obj.createTime
                Object.assign(ruleForm,obj)
                // ruleForm.stored = props.fbData.info.saveAddress
            },{deep:true,immediate:true}
        )
        watch(() => props.zlData,(newVal, oldVal) => {
                ruleForm.name = props.zlData.patents?.patentName
                ruleForm.patentUserId =  props.zlData.patents?.patentUserId
                ruleForm.patentUserName =  props.zlData.patents?.patentUserName
                ruleForm.patentNumber = props.zlData.patents?.patentId
                ruleForm.birthdarDate = props.zlData.patents?.createTime
                // ruleForm.stored = props.fbData.info.saveAddress
            },{deep:true,}
        )
        watch(
            () => props.addFlag,
            (newVal, oldVal) => {
                Object.keys(ruleForm).forEach((key) => {
                    ruleForm[key] = ''
                })
            }
        )

        const changeValue0 = (item) =>{
            // ruleForm.inventorUserName = item.username
            ruleForm.inventorUserName = item.cname
            ruleForm.inventorUserId = item.userId
        }
        const changeValue = (item) => {
            // ruleForm.projectname = item.projectname
            // ruleForm.projectId = item.id
            // store.commit('technologyStrength/getachievementINFO', {
            //     ...{
            //         projectId: item.id,
            //     }
            // })
        }
        const changeValue1 = (item) => {
            ruleForm.patentUserName = item.cname
            ruleForm.patentUserId = item.userId
        }
        const changeValue2 = (item) => {
            // ruleForm.incentivestandard = item.itemText
            // ruleForm.incentivestandardid = item.itemValue
        }
        const changeValue3 = (item) => {
            ruleForm.incentiveStandard = item.itemText
            ruleForm.incentiveStandardId = item.itemValue
        }

        const changeValue4 = (item) => {
            // console.log(item)
            // options.hjdjList = item.children
            // ruleForm.awardwinning = item.itemText
            // ruleForm.awardwinningid = item.itemValue
        }

        const changeValue5 = (item) => {
            // ruleForm.awardwinninglevel = item.itemText
            // ruleForm.awardwinninglevelid = item.itemValue
        }
        const changeValue6 = (item) => {
            // ruleForm.issuingunit = item.name
            // ruleForm.issuingunitid = item.id
        }
        const changeValue7 = (item) => {
            ruleForm.ownership = item.itemText
            ruleForm.ownershipId = item.itemValue
        }
        const changeValue8 = (item) => {
          ruleForm.code = item.name
          ruleForm.applyUnitId = item.id
        }

        // 新增
        const rules = reactive({
            description: [
                { required: true, message: '请输入类型说明', trigger: 'change', },
            ],
            name: [
                { required: true, message: '请输入专利名称', trigger: 'change', },
            ],
            patentUserName: [
                { required: true, message: '请输入专利权人', trigger: 'change', },
            ],
            inventorUserName: [
                { required: true, message: '请输入发明人', trigger: 'change', },
            ],
            patentNumber: [
                { required: true, message: '请输入专利号', trigger: 'change', },
            ],
            birthdarDate: [
                { required: true, message: '请输入申请日期', trigger: 'blur' },
            ],
            incentivestandard: [
                { required: true, message: '请输入奖励标准', trigger: 'blur' },
            ],
            getEvent: [
                { required: true, message: '请输入授权日期', trigger: 'blur' },
            ],
            storeded: [
                { required: true, message: '请输入证书存放地', trigger: 'blur' },
            ],
            ownership: [
                { required: true, message: '请输入所有权排名', trigger: 'blur' },
            ],
        })

        const ruleFormRef = ref()
        const submitForm = async () => {
            ruleFormRef.value.validate(valid =>{
                if (valid){
                    emit('valueFlag2', true)
                }else{
                    emit('valueFlag2', false)
                }
            })
        }

        return {
          deptForm,
            open,
            ruleForm,
            rules,
            ruleFormRef,
            labelPosition,
            data,
            options,

            changeValue0,
            changeValue,
            changeValue1,
            changeValue2,
            changeValue3,
            changeValue4,
            changeValue5,
            changeValue6,
            changeValue7,
          changeValue8,
            submitForm,

        }
    },
}
</script>
<style lang="scss" scoped>
.personAddBtn {
    position: absolute;
    bottom: 0;
    right: 0;
}

.demo-form-inline .el-form-item {
    width: 48%;
}

:deep(.labelHeight .el-form-item__label) {
    line-height: 20px;
}

:deep(.el-date-editor.el-input) {
    width: 100%;
}

:deep(.el-date-editor.el-input__inner) {
    width: 100%;
}

:deep(.demo-form-inline .el-select) {
    width: 100%;
    margin: 0;
}

.el-select {
    width: 100%;
    margin: 0;
}

.selectLabel {
    width: 70%;
    min-height: 40px;
    line-height: 40px;
    padding: 0 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
    display: inline-block;
}

.addLabel {
    display: inline-block;
    width: 120px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #169bd5;
    border-radius: 6px;
    color: #fff;
    margin-left: 15px;
}

.unitBox {
    width: 100%;
    margin: 30px 0;

    .title {
        padding: 15px 0;
        border-bottom: 1px solid #ccc;
    }

    .tagBox {
        line-height: 40px;
        margin-top: 15px;
        border: 1px solid #ccc;
        border-radius: 8px;
        padding: 10px 15px;
    }
}

.el-tag {
    margin-right: 10px;
}


.content-box {
    width: 250px;
    height: 33px;
    padding: 5px;
    box-sizing: border-box;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select {
    color: #eee;
}

.align-center {
    align-items: center;
}

.space-between {
    justify-content: space-between;
}

.mt20 {
    margin-top: 20px;
}

.flex {
    display: flex;
}

.handle {
    position: absolute;
    top: 17px;
    right: 20px;
    display: flex;
    align-items: center;
}

.search-box {
    display: flex;
    justify-content: end;
    align-items: center;
    margin-bottom: 10px;
}
</style>
